<template>
  <div class="store-container">
    <Headbar/>
    <Hungbar/>
    <HeadMenu :info="info"/>
    <NavList v-if="info && goodsClassify" index="offline" :factoryId="info.id" :classify="goodsClassify"/>
    <div class="store-swiper" v-if="banners&&banners.length>0">
      <Carousel :banners="banners" />
    </div>
    <div class="store-content">
      <div class="store-near">
        <div class="store-list">
          <div class="store-fl">
            <img class="store-pic" :src="URL.PIC+info.factoryLogo">
          </div>
          <div class="store-fr">
            <h3 class="store-name">{{info.factoryName}}</h3>
            <div class="store-detail">
              <p class="store-msg-con">
                <span class="store-msg-title">电话</span>：
                <span class="store-msg-val">{{info.phoneNumber}}</span>
              </p>
              <p class="store-msg-con">
                <span class="store-msg-title">地址</span>：
                <span class="store-msg-val store-address">{{info.factoryAddress}}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="store-list" v-if="list && list.length>0" v-for="(item,index) in list" :key="index">
          <div class="store-fl">
            <img class="store-pic" :src="URL.PIC+item.outletImg">
          </div>
          <div class="store-fr">
            <h3 class="store-name">{{item.name}}</h3>
            <div class="store-detail">
              <p class="store-msg-con">
                <span class="store-msg-title">电话</span>：
                <span class="store-msg-val">{{item.phoneNumber}}</span>
              </p>
              <p class="store-msg-con">
                <span class="store-msg-title">地址</span>：
                <span class="store-msg-val store-address">{{item.address}}</span>
              </p>
              <p class="store-msg-con">
                <span class="store-msg-title">营业时间</span>：
                <span class="store-msg-val">
                  <span v-for="(date, i) in item.businessDate" :key="i">{{date}} </span>
                  <span style="display: block;margin-left: 75px; margin-top: 8px">
                    {{item.businessTime.replace(",", "-")}}
                  </span>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footbars/>
  </div>
</template>

<script>
  import Headbar from '@/components/Layouts/Headbar'
  import Hungbar from '@/components/Layouts/Hungbar'
  import Footbars from '@/components/Layouts/Footbars'
  import HeadMenu from '../components/HeadMenu'
  import NavList from '../components/NavList'
  import {offlineStoreList} from '@/api/store'
  import {getFactoryInfo, getFactoryClassify, getFactoryBanner} from '@/api/factory';
  import Carousel from '../components/Carousel'

  export default {
    name: 'OfflineStore',
    components: {
      Headbar,
      Hungbar,
      Footbars,
      HeadMenu,
      NavList,
      Carousel,
    },
    data() {
      return {
        list: {},
        info: {},
        goodsClassify: null,
        bannerList: [
          {streamMediaURL: require('@/assets/images/brand/brand_center01.png')},
          {streamMediaURL: require('@/assets/images/brand/brand_center02.png')},
          {streamMediaURL: require('@/assets/images/brand/brand_center03.png')},
        ],
        banners: null,
        id: null,
      }
    },

    head () {
      return {
        title: '一呼百应工业品直卖网_'+this.info.factoryName+'_线下服务网点',
        meta: [
          { name: 'keywords', content: ''+this.info.factoryName+',线下服务网点' }
        ]
      }
    },

    async asyncData ({ app, query }) {
      let [res1, res2, res3, res4] = await Promise.all([
         app.$axios.get('/factory/frontend/factory/select_one?id='+app.context.params.factoryId),
         app.$axios.get('/product/front/classify/custom_list?factoryId='+app.context.params.factoryId),
         app.$axios.get('/product/front/product_list?factoryId='+app.context.params.factoryId),
         app.$axios.get('/factory_decoration/frontend/banner/select?factoryId='+app.context.params.factoryId+'&terminal=PC'),
       ])
       return {
         info: res1.data.data,
         goodsClassify: res2.data.data,
         list: res3.data.data,
         banners: res4.data.data,
       }
    },
    created() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .store-container {
    min-width: 1200px;
    background: #f7f7f7;
    .store-swiper {
      min-width: 1200px;
      .brandBannerImg {
        width: 100%;
        height: 500px;
        min-width: 1200px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
    }
    .store-content {
      width: 1200px;
      margin: 30px auto 40px;
      .store-near {
        width: 1280px;
        margin-left: -78px;
        overflow: hidden;
        zoom: 1;
        .store-list {
          width: 560px;
          height: 240px;
          background: #fff;
          border: 1px solid #eee;
          margin-left: 78px;
          margin-bottom: 20px;
          float: left;
          .store-fl {
            float: left;
            margin: 20px 0 0 20px;
            width: 120px;
            height: 120px;
            overflow: hidden;
            line-height: 120px;
            border: 1px solid #ddd;
            .store-pic {
              max-width: 120px;
              vertical-align: middle;
            }
          }
          .store-fr {
            float: left;
            margin-left: 25px;
            width: 380px;
            .store-name {
              color: #333;
              font-size: 24px;
              margin: 20px 0 55px;
              overflow: hidden;
              text-overflow:ellipsis;
            }
            .store-detail {
              color: #888;
              font-size: 14px;
              .store-msg-con {
                margin: 0 0 10px;
                .store-msg-title {
                  display: inline-block;
                  width: 60px;
                  text-align: justify;
                  text-align-last: justify;
                  vertical-align: top;
                }
                .store-msg-val {

                }
                .store-address {
                  width: 250px;
                  vertical-align: top;
                  display: -webkit-inline-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss">
.store-container{
  .el-carousel{
    width: 100%;
  }
  .brandBannerImg{
    width: 100%;
    height: 500px;
    min-width: 1200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

</style>
